<template>
  <EcDialog v-model="dialogVisible" body-height="500px" class="form-dialog" top="10vh" width="55%">
    <!-- 标题 -->
    <template #title>
      <div class="dialog-title">
        <SvgIcon icon="info"/>
        <span>{{ dialogTitle }}</span>
      </div>
    </template>

    <!-- 数据信息 -->
    <el-descriptions :column="1" border>
      <el-descriptions-item label="操作模块：">
        <span>{{ formData.title }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="操作类型：">
        <DictTag v-model="formData.business_type" :circle="false" dict-type="sys_operation_type"/>
      </el-descriptions-item>
      <el-descriptions-item label="操作信息：">
        <span>{{ formData.username + ' / ' + formData.ip_address + ' / ' + formData.ip_location }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="请求地址：">
        <span>{{ formData.request_url }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="操作方法：">
        <span>{{ formData.method }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="请求参数：">
        <json-viewer v-if="isJsonData(formData.params)" :expand-depth="4" :value="JSON.parse(formData.params)"/>
        <el-input v-else v-model="formData.params" :autosize="{ minRows: 2}" readonly type="textarea"/>
      </el-descriptions-item>
      <el-descriptions-item label="操作状态：">
        <DictTag v-model="formData.status" :circle="false" dict-type="sys_operation_status"/>
      </el-descriptions-item>

      <el-descriptions-item v-if="formData.status != 0 && formData.error_msg" label="失败原因：">
        <el-input v-model="formData.error_msg" :autosize="{ minRows: 2}" readonly type="textarea"/>
      </el-descriptions-item>

      <el-descriptions-item v-if="formData.return_data" label="返回数据：">
        <json-viewer v-if="isJsonData(formData.return_data)" :expand-depth="4" :value="JSON.parse(formData.return_data)"/>
        <el-input v-else v-model="formData.return_data" :autosize="{ minRows: 2}" readonly type="textarea"/>
      </el-descriptions-item>
    </el-descriptions>
    <!-- 底部操作区域 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </template>
  </EcDialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { EcDialog } from '@/components/dialog';
import { DictTag } from '@/components/dict-tag';
import { isJsonData } from '@/utils/is.ts';
import JsonViewer from 'vue-json-viewer'
import useDialog from '@/hooks/use-dialog.ts';
import { SvgIcon } from '@/components/icon';

defineOptions({name: 'OperationLogInfo'})

const {dialogVisible, dialogTitle} = useDialog(false);

// 默认表单数据
let defaultForm = {
  id: 0,
  user_id: 0,
  username: '',
  title: '',
  business_type: '',
  method: '',
  request_url: '',
  ip_address: '',
  ip_location: '',
  os: '',
  browser: '',
  useragent: '',
  params: '',
  error_msg: '',
  return_data: '',
  status: 0,
  create_time: '',
};

// 表单数据
const formData = ref({...defaultForm});

/** 打开弹窗 */
const open = (data: any) => {
  dialogTitle.value = '操作日志详细';
  dialogVisible.value = true;
  // 设置数据值
  formData.value = {...data};
}
// 提供 open 方法，用于打开弹窗
defineExpose({open})

</script>

<style lang="scss" scoped>
:deep(.el-descriptions__label) {
  width: 100px;
  vertical-align: top;
}

</style>
